<!DOCTYPE html>
<html>
<head>
    <title>增删改查功能实例</title>
    <link rel="stylesheet" href="./element-plus.css">
    <script src="./vue3.4.21.js"></script>
    <script src="element-plus.js"></script>
</head>
<body>
    <div id="app">
        <el-space>
            <el-space>
                <el-input clearable v-model="username" placeholder="姓名"></el-input>
            </el-space>
            <el-space>
                <el-button size="small" round plain type="primary" @click="search">查询</el-button>
            </el-space>
            <el-space>
                <el-button size="small" type="primary" @click="add">添加</el-button>
            </el-space>
        </el-space>
        
        
        
        <el-table border :data="users" style="width: 100%">
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="age" label="年龄" > </el-table-column>
            <el-table-column label="操作" > 
                <template #default="scope">
                    <el-button size="small" type="primary" @click="edit(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="1000" />

        <el-dialog
            v-model="dialogVisible"
            :title="title"
            width="60%"
        >
            <span>
                <el-form class="demo-form-inline">
                    <el-form-item label="姓名">
                      <el-input v-model="user.name" placeholder="请输入姓名" />
                    </el-form-item>
                    <el-form-item label="年龄">
                      <el-input v-model="user.age" placeholder="请输入年龄" />
                    </el-form-item>
                </el-form>
            </span>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </span>
            </template>
        </el-dialog>
    </div>
    <script setup>
        const app = Vue.createApp({
            data(){
                return {
                    users:[],
                    tableData:[
                        {"name":"张三", "age":20},
                        {"name":"李四", "age":21},
                        {"name":"张五", "age":22},
                        {"name":"赵六", "age":22}
                    ],
                    dialogVisible: false,
                    title: '',
                    user: {name:'', age:20},
                    currentUser:null,
                    username:""
                }
            },
            methods:{
                add(){
                    this.title = '添加用户'
                    this.dialogVisible = true
                },
                edit(row){
                    this.title = '修改用户'
                    this.dialogVisible = true
            
                    this.user.name = row.name
                    this.user.age  = row.age
                    
                    this.currentUser = row
                },
                del(row){
                    ElementPlus.ElMessageBox.confirm(
                        '您是否确认删除选中的用户么?',
                        '提示',
                        {
                            confirmButtonText: '是',
                            cancelButtonText: '否',
                            center: true,
                        }
                    ).then(() => {
                        //用户选择了是，删除数据
                        this.users = this.users.filter(one=>one.name!=row.name)
                    })
                    .catch(() => {})
                },
                save(){
                    if(this.title=='添加用户'){
                        for(var i in this.users){
                            if(this.users[i].name == this.user.name){
                                ElementPlus.ElMessage.error("姓名重复")
                                return;
                            }
                        }
                        const one = {
                            "name": this.user.name,
                            "age": this.user.age
                        }
                        this.users.push(one)
                        this.dialogVisible = false
                    }else{
                        this.currentUser.name = this.user.name
                        this.currentUser.age  = this.user.age
                        this.dialogVisible = false
                    }
                },
                search(){
                    //基于username过滤数据
                    if(this.username == ""){
                        this.users = this.tableData
                    }else{
                        this.users = this.tableData.filter(
                            one=>one.name.indexOf(this.username)>=0
                        )
                    }
                }
            },
            mounted(){
                this.users = this.tableData
            }
        }).use(ElementPlus).mount("#app");
    </script>
</body>
</html>